<html>
<head>
    <style type="text/css">

        .tn {
            border: 2px solid #000000;
            height: 208px;
            width: 208px;
            box-shadow: inset 0 0 13px #000000;
            z-index: 1;
        }

        .tnImg {
            position: relative;
            z-index: -2;
            width: 208px;
            height: 208px;
        }

        .infos {
            position: absolute;
            width: 208px;
            height: 208px;
            z-index: 2;
        }

        .title {
            position: absolute;
            top: 15px;
            left: 15px;
            width: 70px;
            height: 13px;
            font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
            font-size: 10px;
            color: #fff;
            text-align: center;

            background-color: #000;
            filter: alpha(opacity = 60);
            opacity: 0.6;

            -moz-border-radius: 13px;
            -webkit-border-radius: 13px;
            -khtml-border-radius: 13px;
            border-radius: 13px;

            -webkit-transition: all 0.7s ease 0s;
            -moz-transition: all 0.7s ease 0s;
            -o-transition: all 0.7s ease 0s;
            transition: all 0.7s ease 0s;
        }

        .title:hover {
            filter: alpha(opacity = 100);
            opacity: 1;
            cursor: default;
        }

        .picker {
            position: absolute;
            bottom: 5px;
            left: 5px;
            width: 10px;
            height: 10px;

            border: 4px solid rgba(0, 0, 0, .6);
            -webkit-background-clip: padding-box; /* for Safari */
            background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */

            -moz-border-radius: 14px;
            -webkit-border-radius: 14px;
            -khtml-border-radius: 14px;
            border-radius: 14px;

            -webkit-transition: all 0.7s ease 0s;
            -moz-transition: all 0.7s ease 0s;
            -o-transition: all 0.7s ease 0s;
            transition: all 0.7s ease 0s;
        }

        .picker:hover {
            border: 4px solid rgba(0, 0, 0, 1);
        }

        .color {
            width: 10px;
            height: 10px;

            background-color: #f00;

            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            -khtml-border-radius: 10px;
            border-radius: 10px;
        }

        .price {
            position: absolute;
            bottom: 5px;
            right: 5px;
            width: 50px;
            height: 13px;
            font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
            font-size: 10px;
            color: #fff;
            text-align: center;

            background-color: #000;
            filter: alpha(opacity = 60);
            opacity: 0.6;

            -moz-border-radius: 13px;
            -webkit-border-radius: 13px;
            -khtml-border-radius: 13px;
            border-radius: 13px;

            -webkit-transition: all 0.7s ease 0s;
            -moz-transition: all 0.7s ease 0s;
            -o-transition: all 0.7s ease 0s;
            transition: all 0.7s ease 0s;
        }

        .price:hover {
            filter: alpha(opacity = 100);
            opacity: 1;
            cursor: default;
        }

        .size {
            position: absolute;
            bottom: 5px;
            right: 60px;
            width: 20px;
            height: 13px;
            font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
            font-size: 10px;
            color: #fff;
            padding-left: 5px;

            background-color: #000;
            filter: alpha(opacity = 60);
            opacity: 0.6;

            -moz-border-radius: 13px;
            -webkit-border-radius: 13px;
            -khtml-border-radius: 13px;
            border-radius: 13px;

            background-image: url(../img/arrow.png);
            background-repeat: no-repeat;
            background-position: 13px 4px;
        }

        .zoom {
            position: absolute;
            bottom: 15px;
            left: 15px;
            width: 10px;
            height: 13px;
            font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
            font-size: 10px;
            color: #fff;
            padding-left: 5px;

            background-color: #000;
            filter: alpha(opacity = 60);
            opacity: 0.6;

            -moz-border-radius: 13px;
            -webkit-border-radius: 13px;
            -khtml-border-radius: 13px;
            border-radius: 13px;
        }

    </style>
</head>
<body>

<div class="tn">
    <div class="infos">
        <div class="title">Jimi Hendrix</div>
        <div class="picker">
            <div class="color"></div>
        </div>
        <div class="price">39 RON</div>
        <div class="size">S</div>
        <!--<div class="zoom">+</div>-->
    </div>
    <img class="tnImg" src="boules300.jpg"/>
</div>


</body>
</html>